<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c" %>
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/plugins/layui/css/layui.css?version=1">
    <link rel="stylesheet" href="/plugins/adminLte/css/AdminLTE.min.css">
    <link rel="stylesheet" href="/css/global.css?version=4" type="text/css"/>

    <!-- Chang URLs to wherever Video.js files will be hosted -->
    <link href="/plugins/video-js/video-js.css" rel="stylesheet" type="text/css">
    <script src="/plugins/jquery.min.js" type="text/javascript"></script>
    <script src="/plugins/layui/layui.js"></script>
    <script type="text/javascript" src="/js/core/helper.js"></script>
    <script type="text/javascript" src="/js/core/jhupload-min.js?v=18"></script>
    <!-- video.js must be in the <head> for older IEs to work. -->
    <script src="/plugins/video-js/video.js"></script>
</head>

<div class="box box-primary">
    <div class="box-frame">
        <div class="layui-form layui-form-pane">
            <div class="layui-form-item">
                <label class="layui-form-label">小区名查询</label>
                <div class="layui-inline">
                    <input type="text" name="comm_name" id="comm_name" autocomplete="off" lay-verify="required"
                           placeholder="请输入小区名" class="layui-input">
                </div>
                <button class="layui-btn layui-btn-normal layui-btn-radius" onclick="queryResourceList();">查询</button>
            </div>
            <hr/>
            <div class="table-responsive">
                <table class="layui-table table" cellpadding="0" cellspacing="0">
                    <col width="150px"/>
                    <col width="150px"/>
                    <col/>
                    <col width="150px"/>
                    <thead>
                    <tr>
                        <th>小区编号</th>
                        <th>小区名</th>
                        <th>当前广告图片</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody id="tbody">
                    </tbody>
                </table>
            </div>

            <div id="page"></div>
            <div style="clear: both"></div>
        </div>
    </div>
</div>
<SCRIPT language="javascript">
    videojs.options.flash.swf = "video-js.swf";
    var element;
    layui.use(['layer', 'form', 'laypage', 'element'], function () {
        element = layui.element();
        queryResourceList();
    });

    var modelParam = {};
    modelParam.pageSize = 2;
    modelParam.page = 1;

    function queryResourceList() {
        var param = {};
        param.commName = $('#comm_name').val();
        param.typeCode = 'video_ads';
        param.pageSize = modelParam.pageSize;
        param.page = 1;

        postJson("/cms/resource/findResourceByComm.x", $.param(param), function (ret) {
            var data = ret.data;
            $('#tbody').empty();
            render(data.list);
            layui.laypage({
                cont: 'page'
                , pages: Math.ceil(data.size / modelParam.pageSize)
                , jump: function (row, first) {
                    if (!first) {
                        param.page = row.curr;
                        modelParam.page = row.curr;
                        queryPage(param);
                    }
                }
            });
        });
    }

    function queryCurrentResource() {
        var param = {};
        param.commName = $('#comm_name').val();
        param.typeCode = 'video_ads';
        param.pageSize = modelParam.pageSize;
        param.page = modelParam.page;
        queryPage(param);
    }

    function queryPage(param) {
        postJson("/cms/resource/findResourceByComm.x", $.param(param), function (ret) {
            $('#tbody').empty();
            render(ret.data.list);
        });
    }

    function render(list) {
        modelParam.list = list;
        for (var i in list) {
            var row = list[i];
            var tr = $("<tr></tr>");
            tr.appendTo($('#tbody'));
            $("<td style='vertical-align:middle'>" + row.comm_code + "</td>").appendTo(tr);
            $("<td style='vertical-align:middle'>" + row.comm_name + "</td>").appendTo(tr);
            var advertising = $("<td style='vertical-align:middle;' class='t3'></td>");
            outterLoop: for (var j = 0; j < 4; j++) {
                var fileName = "OutdoorVideoAds-" + (j + 1);
                var indexBar = 'bar' + row.comm_code + j;
                var selectId = 'select' + row.comm_code + j;
                for (var k in row.resourceList) {
                    var advRow = row.resourceList[k];
                    if (advRow.description == fileName) {
                        var createVideo;
                        if (advRow.isApproved == "Y") {
                            createVideo = "<video id='example_video_1' class='video-js vjs-default-skin' controls preload='none' width='200px' height='140px'>" +
                                "<source src='" + advRow.content_url + "' type='video/mp4' />" +
                                "<track kind='captions' src='demo.captions.vtt' srclang='en' label='English'/>" +
                                "<track kind='subtitles' src='demo.captions.vtt' srclang='en' label='English'/>" +
                                "</video>" + advRow.create_time;
                        } else {
                            createVideo = " <div class='center' style='width:200px;height:140px;'> <img style='max-height:100%; max-width:100%;' src='/pic/upload_ioc.png'/> </div><br> " +
                                "<div> 无广告";
                        }
                        $("<td align='center' style='border: 1px solid #b0c3e3;width:200px;height:200px;'>视频-" + (j + 1) + " <hr>" +
                            createVideo +
                            "<div style='width: 200px; margin-top: 5px; margin-bottom: 5px;'>" +
                            "<div class='layui-progress' lay-showpercent='true' lay-filter='" + indexBar + "'>" +
                            "<div class='layui-progress-bar' lay-percent='0%'></div>" +
                            "</div>" +
                            "</div>" +
                            "<input id='" + selectId + "' style='display:none;' type='file' accept='video/mp4' onchange='uploadFile(this,\"" + indexBar + "\", \"" + advRow.resource_id + "\",\"" + row.comm_code + "\",\"" + row.comm_name + "\",\"" + fileName + "\")'/>" +
                            "<button class='layui-btn layui-btn-danger layui-btn-small' onclick='deleteResource(\"" + advRow.resource_id + "\")'>删除</button> " +
                            "<button class='layui-btn  layui-btn-small' onclick='redistribution(\"" + selectId + "\")'>替换</button> " +
                            "</td>").appendTo(advertising);
                        continue outterLoop;
                    }
                }
                $("<td align='center' style='border: 1px solid #b0c3e3;width:200px;height:200px;'>视频-" + (j + 1) + " <hr>" +
                    " <div class='center' style='width:200px;height:140px;'> <img style='max-height:100%; max-width:100%;' src='/pic/upload_ioc.png'/> </div><br> " +
                    "<div> 无广告" +
                    "<div class='layui-progress' style='margin-top: 5px; margin-bottom: 5px;' lay-showpercent='true' lay-filter='" + indexBar + "'>" +
                    "<div class='layui-progress-bar layui-bg-blue' lay-percent='0%'></div>" +
                    "</div>" +
                    "<input id='" + selectId + "' style='display:none;' accept='video/mp4' type='file' onchange='uploadFile(this,\"" + indexBar + "\", null,\"" + row.comm_code + "\",\"" + row.comm_name + "\",\"" + fileName + "\")'/>" +
                    "<button class='layui-btn layui-btn-danger layui-btn-small'>删除</button> " +
                    "<button class='layui-btn  layui-btn-small' onclick='redistribution(\"" + selectId + "\")'>替换</button> " +
                    "</div>" +
                    "</td>").appendTo(advertising);
            }
            advertising.appendTo(tr);
            var last = $("<td align='center' style='vertical-align:middle' class='t4'></td>");
            $("<button class='layui-btn' onclick='notificationUpdate(\"" + row.comm_code + "\")'>通知更新</button>").appendTo(last);
            last.appendTo(tr);
        }
        element.init();
    }

    function uploadFile(obj, indexBar, resourceId, commCode, commName, fileName) {
        //UpladFile(obj.files[0]);
        var form = new FormData(); // FormData 对象
        form.append("file", obj.files[0]); // 文件对象
        form.append("resourceId", resourceId);
        form.append("commCode", commCode);
        form.append("commName", commName);
        form.append("fileName", fileName);
        var indexIE = false; //兼容IE
        upladFile("/cms/resource/uploadVideoAds.x", form,
            function (error) {
                element.progress(indexBar, '0%');
                layer.msg(error, {
                    time: 30000,
                    btn: ['确定']
                });
            },
            function (max, value, percent, upladSize) {
                if (!!window.ActiveXObject || "ActiveXObject" in window) {
                    if (!indexIE) {
                        indexIE = true;
                        setTimeout(function () {
                            indexIE = false;
                            element.progress(indexBar, percent + "%");
                        }, 200);
                    }
                } else
                    element.progress(indexBar, percent + "%");
            }, function () {
                queryCurrentResource();
                layer.msg('&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;上传成功', {icon: 6});
            });
    }

    function redistribution(id) {
        $('#' + id).trigger('click');
    }

    function deleteResource(resourceId) {
        layui.layer.confirm('确定要删除？', {
            btn: ['确定', '取消']
        }, function () {
            var param = {};
            param.resource_id = resourceId;
            param.isApproved = "N";
            param.approvedState = "不显示显示视频广告";
            param.isUpdateTime = true;
            postJson("/cms/resource/approvedState.x", $.param(param), function (data) {
                queryCurrentResource();
                layui.layer.closeAll();
            });
        });
    }

    function notificationUpdate(commCode) {
        var param = {};
        param.commCode = commCode;
        postJson("/cms/resource/notificationUpdate.x", $.param(param), function (ret) {
        });
    }

</SCRIPT>